<template>
	<view>
		<uni-card title="" extra="" isShadow note="">
			<div class="Grid" @click="userInfoClick()">
				<div class="Grid-cell1"><img class="head-img" :src="userAvator"></div>
				<div class="Grid-cell2">{{nickName}} </div>
			</div>
		</uni-card>

		<uni-card title="" extra="" isShadow note="">
			<uni-list>
				<uni-list-item v-for="item in lists" :key="item.id" :title="item.title" clickable @click="onClick(item)" />
			</uni-list>
		</uni-card>

		<view class="button-sp-area" v-if="$store.state.hasLogin">
			<button type="warn" @click="userLogout">退出登录</button>
		</view>

	</view>
</template>

<script>
	import {
		userLogin,
		getUserInfo
	} from '@/api/user.js';
	import {
		mapMutations
	} from 'vuex';
	
	let unLoginAvator = '../../static/avator.jpg';
	let unLoginName = '点击登录';

	export default {
		data() {
			return {
				userAvator : unLoginAvator,
				nickName : unLoginName,
				lists: [{
					title: 'line1'
				}, {
					title: 'line2'
				}]
			}
		},
		onShow() {
			console.log("show")
			this.checkLoginState()
		},
		onLoad() {
			console.log('onload')
			this.checkLoginState()
		},
		methods: {
			...mapMutations(['updateLoginState','updateUserInfo']),
			userLogout() {
				this.updateLoginState(false)
				this.updateUserInfo({})
				getApp().globalData.token = ""
				this.userAvator = unLoginAvator
				this.nickName = unLoginName
			},

			checkLoginState() {
				let isLogin = this.$store.state.hasLogin;

				if (!isLogin) {
					console.log('未登录')
					this.userInfo = {
						userAvator: unLoginAvator,
						userName: unLoginName
					}
				} else {
					this.userAvator = this.$store.state.userInfo.user.avatar;
					this.nickName = this.$store.state.userInfo.user.nickname;
				}
			},
			userInfoClick(e) {
				let loginState = this.$store.state.hasLogin;
				console.log(1, loginState)
				if (!loginState) {
					//未登录
					uni.navigateTo({
						url: '../admin/login',
						animationType: 'pop-in',
						animationDuration: 200
					})

				} else {
					//修改信息
					// uni.navigateTo({
					// 	url:'../home/home'
					// })
				}

			},
			onClick(e) {
				console.log(e)
				uni.showToast({
					title: '列表被点击'
				})
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	
	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	/* #endif */
	
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.button-sp-area {
		margin: 0 auto;
		width: 90%;
	}

	.Grid {
		display: flex;
		justify-content: space-between;
	}

	.Grid-cell {
		flex: 1;
		margin: 5rpx 35rpx;
	}

	.Grid-cell2 {
		flex: 1;
		margin: auto 75rpx;
		align-self: center;
	}

	.head-img {
		width: 66px;
		height: 66px;
		background-color: #fff;
		padding: 3px;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
		box-sizing: border-box;
		border-radius: 50%;
	}

	.head-img img {
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
</style>
